<%--
  Created by IntelliJ IDEA.
  User: RuoLi
  Date: 2023/1/25
  Time: 16:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>主页</title>
    <script src="<%=request.getContextPath()%>/js/index.js"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/index.css">
    <!-- axios -->
    <script src="<%=request.getContextPath()%>/js/axios.js"></script>
    <!-- import Vue before Element -->
    <script src="<%=request.getContextPath()%>/js/vue.js"></script>
    <!-- import JavaScript -->
    <script src="<%=request.getContextPath()%>/js/element-ui.js"></script>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/main_user.css"/>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/iconfont-ali.css">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/fonts/element-icons.ttf">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/fonts/element-icons.woff">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/iconfont.ttf">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/iconfont.woff">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/iconfont.woff2">
</head>
<body>
<div id="app">
    <el-row type="flex" justify="center">
        <el-col :span="23">
            <h5>学习计划</h5>
            <el-divider content-position="left">一寸光影一寸金</el-divider>
            <el-row :gutter="20" type="flex" justify="start">
                <el-col>
                    <el-card class="box-card" :body-style="{ padding: '0px' }" shadow>
                        <img :src="img.img1" style="width: 150px;height: 150px" @click="getRandomTopic">
                    </el-card>
                    <label>每日一组</label>
                </el-col>
                <el-col :offset="1">
                    <el-card class="box-card" :body-style="{ padding: '0px' }" shadow>
                        <img :src="img.img2" style="width: 150px;height: 150px">
                    </el-card>
                    <label>专项训练</label>
                </el-col>
                <el-col :offset="1">
                    <el-card class="box-card" :body-style="{ padding: '0px' }" shadow>
                        <img :src="img.img3" style="width: 150px;height: 150px">
                    </el-card>
                    <label>强化练习</label>
                </el-col>
                <el-col :offset="1">
                    <el-card class="box-card" :body-style="{ padding: '0px' }" shadow>
                        <img :src="img.img4" style="width: 150px;height: 150px">
                    </el-card>
                    <label>巩固知识</label>
                </el-col>
                <el-col :offset="1">
                    <el-card class="box-card" :body-style="{ padding: '0px' }" shadow>
                        <img :src="img.img5" style="width: 150px;height: 150px">
                    </el-card>
                    <label>随机练习</label>
                </el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row justify="center" type="flex">
                <el-col>
                    <h5>知识点</h5>
                    <div class="wrapper">
                        <input id="exp1" class="exp" type="checkbox">
                        <div class="text">
                            <label class="btn" for="exp1"></label>
                            <el-link :underline="false" :href="knowledgePointLink"
                                     v-for="(knowledgePoint,index) in lintTabs" class="main_index_chapter_point">
                                {{knowledgePoint}}
                            </el-link>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row>
                <el-button @click="chose_all" class="el-icon-notebook-2" round>全部题目</el-button>
                <el-button @click="chose_xuanze" round class="iconfont icon-xuanze" round>选择</el-button>
                <el-button @click="chose_tiankong" round class="iconfont icon-icon-1" round>填空</el-button>
                <el-button @chlick="chose_panduan" round class="iconfont icon-icon-" round>判断</el-button>
            </el-row>
            <el-divider></el-divider>
            <el-row>
                <el-select clearable @change="MatchCharactersSelect()" v-model="valueChapterName" placeholder="请章节">
                    <el-option
                            v-for="item in chapterNames"
                            :value="item.value">
                    </el-option>
                </el-select>
                <el-select clearable v-model="valueKnowledgePoint" placeholder="请选择知识点">
                    <el-option
                            v-for="item in knowledgePoints"
                            :value="item.value">
                    </el-option>
                </el-select>
                <el-input placeholder="请输入题目编号" v-model="inputDetailedTopicId" class="main_index_search_input">
                    <el-button slot="append" icon="el-icon-search" @click="search_input"></el-button>
                </el-input>
            </el-row>
            <template>
                <el-table
                        @row-click="handle"
                        :data="TopicDataInfo"
                        style="width: 100%;
                        margin-top: 20px">
                    <el-table-column
                            prop="topicKnowledgePoint"
                            width="200"
                            label="知识点">
                    </el-table-column>
                    <el-table-column
                            prop="topicDetailedId"
                            width="120"
                            label="编号">
                    </el-table-column>
                    <el-table-column
                            prop="topicTitle"
                            width="500"
                            label="题目">
                    </el-table-column>
                    <el-table-column
                            prop="topicType"
                            label="题目类型">
                    </el-table-column>
                    <el-table-column
                            :prop="topicFrequency"
                            label="题解次数">
                    </el-table-column>
                </el-table>
                <el-row>
                    <el-col :span="5">
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page.sync="currentPage"
                                :page-sizes="[10, 20, 50, 100]"
                                :page-size.sync="pageSize"
                                layout="sizes, prev, pager, next"
                                :total="total">
                        </el-pagination>
                    </el-col>
                </el-row>
            </template>
        </el-col>
    </el-row>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                knowledgePointLink: '123',
                total: 10,
                currentPage: 1,
                pageSize: 10,
                chapterNames: [],
                knowledgePoints: [],
                TopicDataInfo: [],
                valueKnowledgePoint: '',
                valueChapterName: '',
                inputDetailedTopicId: '',
                lintTabs: [],
                img: {
                    img1: '/online_website/img/study_1.jpg',
                    img2: '/online_website/img/study_2.jpg',
                    img3: '/online_website/img/study_3.jpg',
                    img4: '/online_website/img/study_4.jpg',
                    img5: '/online_website/img/study_5.jpg',
                },
            }
        },
        methods: {
            //获取总页数
            getToTalPage() {
                axios({
                    url: "/online_website/common/detailedTopicPage",
                    method: "post",
                    contentType: "application/json",
                    params: {
                        "currentPage": this.currentPage,
                        "pageSize": this.pageSize,
                    },
                }).then((res) => {
                    this.TopicDataInfo = res.data;
                    this.total = res.data["totalSize"]
                })
            },
            //点击分页数据
            handleSizeChange() {
                let method = "post"
                this.getTopicDataUserClient(method);
            },
            handleCurrentChange() {
                let method = "post"
                this.getTopicDataUserClient(method);
            },
            //获取题目信息
            getTopicInfoData() {
                let method = "get"
                this.getTopicDataUserClient(method);
            },
            getTopicDataUserClient(value) {
                axios({
                    url: "/online_website/common/detailedTopicInfoShow",
                    method: value,
                    contentType: "application/json",
                    params: {
                        "currentPage": this.currentPage,
                        "pageSize": this.pageSize,
                    },
                }).then((res) => {
                    this.TopicDataInfo = res.data;
                })
            },
            //获取链接标签
            getLinkTabsKnowledgePoint() {
                axios({
                    url: "/online_website/common/ShowKnowledgePointTabs",
                    method: "get",
                    contentType: "application/json",
                }).then((res) => {
                    this.lintTabs = res.data;
                    for (let i = 0; i < res.data.length; i++) {
                        this.lintTabs[i] = res.data[i]["topicKnowledgePoint"]
                    }
                })
            },
            // knowledgePointTabsLinkClick() {
            //     console.log(123)
            // },
            //表格点击事件
            handle(row, event, column) {
                let id = row.topicDetailedId;
                axios({
                    url: "/online_website/common/GoUserTopicPage",
                    method: "get",
                    contentType: "application/json",
                    params: {
                        "detailedTopicId": id,
                    },
                }).then((res) => {
                    window.location.href = "/online_website/user/info/userTopic.jsp"
                })
            },
            //图片预加载
            preloadImgMap(map) {
                Object.values(map).forEach(
                    imgUrl => {
                        let img = new Image();
                        img.src = imgUrl
                    })
            },
            //切换题目类型 分别显示
            chose_all() {
                //获取题目信息
                this.getTopicInfoData();
                //获取分页信息
                this.getToTalPage();
            },
            chose_xuanze() {
                this.currentPage = 1;
                let value = "选择题";
                this.chose(value)
            },
            chose_tiankong() {
                this.currentPage = 1;
                let value = "填空题";
                this.chose(value)
            },
            chose_panduan() {
                this.currentPage = 1;
                let value = "判断题";
                this.chose(value)
            },
            chose(value) {
                axios({
                    url: "/online_website/common/DetailedTopicChangeInfo",
                    method: "get",
                    contentType: "application/json",
                    params: {
                        "topic_type": value,
                        "currentPage": this.currentPage,
                        "pageSize": this.pageSize,
                    },
                }).then((res) => {
                    this.TopicDataInfo = res.data;
                    //获取分页数据
                    this.getToTalPageChose(value)
                })
            },
            //获取总页数(题目类型)
            getToTalPageChose(value) {
                axios({
                    url: "/online_website/common/DetailedTopicChangeInfo",
                    method: "post",
                    contentType: "application/json",
                    params: {
                        "topic_type": value,
                        "pageSize": this.pageSize,
                    },
                }).then((res) => {
                    this.total = res.data["totalSize"]
                })
            },
            //获取选项栏数据
            getSelectData() {
                axios({
                    url: "/online_website/common/GetUserSelectInfo",
                    method: "get",
                    contentType: "application/json",
                    params: {
                        "param": "chapter_name"
                    }
                }).then((res) => {
                    this.chapterNames = res.data["chapter_name"]
                });
                axios({
                    url: "/online_website/common/GetUserSelectInfo",
                    method: "get",
                    contentType: "application/json",
                    params: {
                        "param": "knowledge_point"
                    }
                }).then((res) => {
                    this.knowledgePoints = res.data["knowledge_point"]
                });
            },
            //匹配双选项
            MatchCharactersSelect() {
                if (this.valueChapterName.trim().length > 0) {
                    //如果章节选项不为空 更新知识点选项
                    axios({
                        url: "/online_website/common/MatchSelectKnowledgePoint",
                        method: "get",
                        contentType: "application/json",
                        params: {
                            "chapter_name": this.valueChapterName
                        }
                    }).then((res) => {
                        this.knowledgePoints = res.data["knowledge_point"]
                    });
                } else {
                    axios({
                        url: "/online_website/common/GetUserSelectInfo",
                        method: "get",
                        contentType: "application/json",
                        params: {
                            "param": "knowledge_point"
                        }
                    }).then((res) => {
                        this.knowledgePoints = res.data["knowledge_point"]
                    });
                }
            },
            //搜索栏
            search_input() {
                let detailedTopicId = this.inputDetailedTopicId
                if (detailedTopicId.trim().length > 0) {
                    this.valueKnowledgePoint = '';
                    this.valueChapterName = '';
                    //搜索指定编号题目
                    this.search_input_axios(detailedTopicId, null, null);
                } else {
                    //搜索指定章节或者知识点题目
                    if (this.valueChapterName.trim().length < 1 && this.valueChapterName.trim().length < 1) {
                        if (detailedTopicId.trim().length <= 0){
                            //获取题目信息
                            this.getTopicInfoData();
                            //获取分页信息
                            this.getToTalPage();
                        }
                        this.$notify({
                            title: '警告',
                            message: '缺少搜索关键字',
                            type: 'warning'
                        });

                    } else if (this.valueChapterName.trim().length > 0) {
                        this.search_input_axios(null, this.valueChapterName, null)
                    } else if (this.valueKnowledgePoint.trim().length > 0) {
                        this.search_input_axios(null, null, this.valueKnowledgePoint);
                    } else if (this.valueChapterName.trim().length > 0 && this.valueChapterName.trim().length > 0) {
                        this.search_input_axios(null, this.valueChapterName, this.valueKnowledgePoint);
                    }
                }
            },
            search_input_axios(detailedTopicId, valueChapterName, valueKnowledgePoint) {
                axios({
                    url: "/online_website/common/InputSearch",
                    method: "get",
                    contentType: "application/json",
                    params: {
                        "detailedTopicId": detailedTopicId,
                        "valueChapterName": valueChapterName,
                        "valueKnowledgePoint": valueKnowledgePoint,
                    }
                }).then((res) => {
                    this.TopicDataInfo = res.data;
                });
            },
            getRandomTopic(){
                axios({
                    url: "/online_website/common/GetRandomTopicCount",
                    method: "get",
                    contentType: "application/json",
                    params: {
                       "RandomStatus":1,
                    }
                }).then((res) => {
                    window.location.href = "/online_website/user/info/userTopic.jsp"
                });
            }
        },
        created() {
            //获取题目信息
            this.getTopicInfoData();
            //获取分页信息
            this.getToTalPage();
            //获取链接标签
            this.getLinkTabsKnowledgePoint();
            //获取选项栏数据
            this.getSelectData();
        },
        mounted() {
            this.preloadImgMap(this.img);
        }
    })
</script>
<style>
    .btn::after {
        content: '展开'
    }

    .exp:checked + .text .btn::after {
        content: '收起'
    }
</style>
</html>
